<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>123</h1>
    <a href='#bottom'>去底部</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <h1>123</h1>
    <!-- 
        target属性，用来指定超链接打开的位置
        可选值：
        _self 默认值，在当前页面中打开超链接
        _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档
        # 可以直接将超链接的href属性设置为#，这样点击超链接以后
        页面不会发生跳转，而是转到当前页面的顶部的位置
        -也可以跳转到页面的指定位置，只需将href属性设置#目标元素
          的id属性值
        -->
    <a href='http://www.baidu.com'>超链接</a>
    <a id='bottom' href='#'>回到顶部</a>
    <!-- 可以使用 javascript:;来作为href的属性，磁石点击这个超链接什么也不会发生-->
    <a href='javascript:;'>这是一个新的超链接</a>
    <br>

    <!-- 
        img这种元素属于替换元素(块和行内元素之间，具体两种元素的特点)
         属性：
             src 属性指定的是外部图片的路径/网址
             alt 图片的描述，这是描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
                 搜索引擎会根据alt中的内容来识别图片
             width 图片的宽度
             hight 图片的高度
                 -宽度和高度中如果只修改一个，则另一个会等比例缩放
        图片的格式：
          jpeg(jpg)
             -支持的颜色比较丰富，不支持透明效果，不支持动图
             -一般用来显示照片
          gif
             -支持的颜色比较少，支持简单透明，支持动图
             -颜色单一的图片，动图
          png
             -支持的颜色丰富，支持复杂透明，不支持动图
             -颜色丰富，复杂透明图片(转为网页而生)
          webp
             -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
             -它具备其他图片格式的所有有点，而且文件还特别小
             -缺点，兼容性不好
          base64
             -将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
             -一般都是一些需要网页一起加载的图片才会使用base64
            
    -->
    <img width=100 src='./img/v2-b92563bfa2c8e2bdd7e55e797bf98978_1440w.jpg'>
    <img width=200 height=150 src='https://img0.baidu.com/it/u=2953039099,769603661&fm=26&fmt=auto' alt="注释">
    <img width=200 src='https://img0.baidu.com/it/u=2953039099,769603661&fm=26&fmt=auto' alt="注释">
    <br>
    <!-- 
        内联框架，用于向当前页面中引入一个其他页面
         src制定要引入的网页的路径
    -->
    <iframe src='./2.html' width=100></iframe>
    <br>


    <!--
        aduio 标签用来向页面中引入一个外部的音频文件的
            音视频文件引入时，默认情况下不允许用户自己控制播放停止
        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                -如果设置了autoplay则音乐在打开页面时会自动播放
                 但是目前来讲大部分浏览器都不会自动对音乐进行播放
            loop 是否循环播放
    -->
    <audio src="" controls autoplay loop></audio>
    
    <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件-->
    <audio controls>
        对不起，您的浏览器不支持播放音频！请升级浏览器！
        <source src=''>
        <!--IE8及以下的浏览器支持此音频标签-->
        <embed src=""  type="audio/mp3">
    </audio>  
    

    <!--
         使用video标签来向网页中引入一个视频
             -使用方式和audio基本上是一样的
    -->
   <video src="" controls></video>
   <!--引入腾讯视频文件-->
   <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=m3271xd83ml" allowFullScreen="true"></iframe>
   <!-- 
    <video controls>
      <source src="">
      <embed src=""  type="video/mp4">
    </video>
    -->  

    <!--
        RGBA:
           -就是在rgb的基础上增加了一个a表示透明度
           -需要四个值，前三个和rgb一样，第四个表示不透明度
              1表示完全不透明  0表示完全透明  0.5半透明
        十六进制的RGB值：
           -语法:#红色绿的蓝色
           -颜色浓度通过 00-ff
           -如果颜色两位两位重复可以进行简写
               #aabbcc -- >#abc
        HSL值 HSLA值
           -H 色相(0-360)
           -S 饱和度，颜色的浓度0-100%
           -L亮度 颜色的亮度 0-100%
    -->
</body>
</html>
